<template>
  <div>
    <div
      class="shipmentItem"
      :style="data.transientStatus == '20' ? 'backgroundColor: red;' : ''"
    >
      <div class="title">
        <h1>发货单{{ data.index + 1 }}</h1>
        <p>发货单号：{{ data.deliverCargoNo }}</p>
      </div>
      <div class="cont">
        <h1>
          <p>库 &nbsp; &nbsp; &nbsp; &nbsp;区：</p>
          <span>{{ data.storageArea }}</span>
        </h1>
        <h1>
          <p>发货类型：</p>
          <span>{{ data.deliverGoodsType | deliverGoodsTypeShow }}</span>
        </h1>
        <h1>
          <p>装车服务：</p>
          <span>{{ data.loadingService == 1 ? "是" : "否" }}</span>
        </h1>
        <h1>
          <p>发货件重：</p>
          <span
            >{{ data.deliverGoodsNum }}pcs/{{ data.deliverGoodsWeight }}kg</span
          >
        </h1>
        <h1>
          <p>发货时间：</p>
          <span>{{ data.deliverGoodsTime }}</span>
        </h1>
      </div>
      <!-- 按钮 -->
      <div class="button">
        <button @click="goWebPage(data.id)" type="button">发货</button>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
import { getLocalhostUrl } from "@/utils/common";
import { startDelivery } from "@/services/api";
export default {
  props: ["data"],
  methods: {
    goWebPage(id) {
      startDelivery({
        deliverCargoBillId: id,
      }).then((res) => {
        if (res.status) {
          Toast(res.message);
        } else {
          try {
            window.appPlat.goWebPage(
              getLocalhostUrl() + `/shipmentDetail/${id}`
            );
          } catch (e) {
            this.$router.push(`/shipmentDetail/${id}`);
          }
        }
      });
    },
  },
  filters: {
    deliverGoodsTypeShow(e) {
      if (e == 1) {
        return "发货出库";
      } else if (e == 2) {
        return "查验出库";
      } else if (e == 3) {
        return "整板出库";
      } else if (e == 4) {
        return "速提出库";
      } else {
        return "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.shipmentItem {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0px 3px 5px 0px rgba(223, 229, 233, 1);
  border-radius: 5px;
  position: relative;
  margin-bottom: 10px;

  * {
    margin: 0;
    padding: 0;
  }

  .title {
    width: 100%;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 2px dotted #b4b7c9;

    & > h1 {
      display: inline;
      font-size: 16px;
      font-weight: 500;
      color: #ffffff;
      line-height: 20px;
      padding: 0 3px;
      background-color: #3a535b;
    }

    & > p {
      font-size: 16px;
      font-weight: 400;
      color: #8c9ba5;
      line-height: 20px;
    }
  }

  .cont {
    width: 100%;
    padding-top: 5px;
    box-sizing: border-box;

    & > h1 {
      width: 100%;
      overflow: hidden;
      margin-bottom: 3px;

      & > p {
        width: 25%;
        display: inline-block;
        font-size: 16px;
        font-weight: 400;
        color: #999999;
        line-height: 20px;
      }

      & > span {
        display: inline-block;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        line-height: 20px;
        width: 75%;
      }
    }
  }

  .button {
    position: absolute;
    right: 15px;
    bottom: 15px;

    button {
      width: 90px;
      border-radius: 15px;
      border: 2px solid #f39c12;
      font-size: 16px;
      font-weight: 500;
      color: #f39c12;
      line-height: 30px;
      background-color: #fff;
    }
  }
}
</style>
